<template>
  <div class="resetPassword">
    <div class="container"
         v-loading="loading"
         element-loading-text="正在发送验证码">
      <el-steps :active="active" :space="200" finish-status="success"  align-center>
        <el-step title="输入用户名和邮箱" icon="el-icon-edit"></el-step>
        <el-step title="输入验证码" icon="el-icon-s-promotion"></el-step>
        <el-step title="设置新密码" icon="el-icon-key"></el-step>
      </el-steps>
      <el-form :rules="rules"ref="form" :model="form" label-width="80px" class="login-form">
        <div v-show="active==0" class="form">
          <el-form-item  label="用户名"  prop="userName">
            <el-input prefix-icon="el-icon-user" type="username" v-model="form.userName"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input  prefix-icon="el-icon-message" type="email" v-model="form.email"></el-input>
          </el-form-item>
        </div>

        <div v-show="active==1" class="form">
          <el-form-item label="验证码" prop="code">
            <el-input  prefix-icon="el-icon-s-opportunity" type="code" v-model="form.code"></el-input>
          </el-form-item>
        </div>

        <div v-show="active==2" class="form">
          <el-form-item label="新密码" prop="newPassword">
            <el-input  v-model="form.newPassWord" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="form.confirmPassWord" autocomplete="off" show-password></el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="message" size="small" @click="back">返回</el-button>
          <el-button v-show="active==1||active==2||active==3" type="warning" size="small" @click="prev">上一步</el-button>
          <el-button v-show="active==0" type="success" size="small" @click="send">发送验证码</el-button>
          <el-button v-show="active==0&&active2!=0" type="warning" size="small" @click="next">下一步</el-button>
          <el-button v-show="active==1&&this.form.code!=null&&this.form.code.length>3" type="warning" size="small" @click="next">下一步</el-button>
          <el-button v-show="active==2" type="success" size="small" @click="verification">保存并返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Retrieve",
  data() {
    return {
      loading: false,
      active: 0,
      active2: 0,
      fromUserEmail: {},
      form: {
        newPassWord: '',
        confirmPassWord: ''
      },
      rules: {
        userName: [
          { message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '用户名长度要大于2', trigger: 'blur' }
        ],
        email: [
          {  message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
        newPassWord: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 5, message: '长度不少于5位', trigger: 'blur' }
        ],
        confirmPassWord: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, message: '长度不少于5位', trigger: 'blur' }
        ],
      },
      code: ''
    }
  },
  methods:{
    back(){
      this.$router.push("/login")
    },
    prev(){
      if (this.active!=0){
        this.active--
      }
    },
    next() {
      if (this.active!=3){
        this.active++
      }
    },
    send(){
      //发送邮件
      if (this.form.userName==='' || this.form.userName==null ||this.form.email==='' || this.form.email==null){
        this.$message.error("请填写信息！")
      }else {
        this.loading=true
        this.active++
        this.active2++
        this.loading=false
        this.request.get("/user/sendEmail",{
          params:{
            email: this.form.email,
            userName: this.form.userName
          }
        }).then(res =>{
          if (res.code===200){
            this.$message.success("已经发送验证码！请注意查收")
          }else {
            this.$message.error(res.message)

          }
        })
      }
    },
    verification(){
      //设置新密码
      if (this.form.newPassWord !== this.form.confirmPassWord) {
        this.$message.error("2次输入的新密码不相同")
        return false
      }
      this.request.post("/user/validationEmail", this.form).then(res => {
        if (res.code === 200) {
          this.$message.success("修改成功")
          this.$router.push("/login")
        } else {
          this.$message.error(res.message)
        }
      })
    },
  }
}
</script>

<style scoped>
.resetPassword{
  opacity: 80%;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: absolute; /* 不可缺少 */
  background-repeat: no-repeat;
  background-image: url("../assets/background.png");
}
.container{
  width: 400px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: rgba(108,225,254,0.7); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}
.form{
  margin-top: 5%;
}
</style>
